<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>登录</title>
  <link rel="stylesheet" href="./css/come01.css">
  <link rel="stylesheet" href="./css/login.css">
  <script src="./js/jquery.min.js"></script>
  
    <!-- icon -->
    <link rel="stylesheet" href="./font_3447033_tcrd8mx9lh8/iconfont.css">
</head>
<body>
    <div class="head">
      <div class="center">
        <a href="#"><img src="./img_03/logo_back_01.png" alt=""></a>
      </div>
    </div>

    <div class="middle">
     <div class="center">
      <a href=""></a>
      <div>

          <!-- 第一个div -->
        <div class="one" id="one">
          
          <ul class="clear" id="xuan">
            <li class="bor">密码登录</li>
            <li>短信登陆</li>
          </ul>
        <div id="ze">
          <div class="inpu">
               <div id="denglu_hide">
                 <i class="icon iconfont">&#xe8af;</i>
                  账号名或者登录密码不正确
               </div>
            <div>
              <div><label for=""><i class="icon iconfont" title="用户名">&#xe606;</i></label></div>
            <div><input type="text" placeholder="账号名/邮箱/手机号" name="username" id="username"></div>
            </div>

            <div>
              <div><label for=""><i class="icon iconfont" title="请输入登录密码" >&#xe620;</i></label></div>
              <div><input type="password" placeholder="请输入登录密码" name="password" id="password"></div>
            </div>
            <div>
              <button id="denglu">按钮</button>
            </div>

            <div>
              <a href="#"><i class="icon iconfont">&#xe666;</i>微博登录</a>
              <a href="#"><i class="icon iconfont">&#xe613;</i>支付宝登录</a>
            </div>
            <div>
              <ul>
                <li><a href="#">忘记密码</a></li>
                <li><a href="#">忘记账号名</a></li>
                <li><a href="#">免费注册</a></li>
              </ul>
            </div>
          </div>
         

        <div class="duanxin">
            <div id="duanxin_hide"> <i class="icon iconfont">&#xe8af;</i>
              手机号码格式不正确，请重新输入</div>
          <div>
            <div><label for=""><i class="icon iconfont" title="请输入手机号">&#xe692;</i></label></div>
            <div>
              <select name="" id="">
                <option value=""> &nbsp;+86 &nbsp;&nbsp;  </option>
                <option value=""> &nbsp;+86 &nbsp;&nbsp;  中国大陆</option>
                <option value="">+852&nbsp;&nbsp; 中国香港</option>
                <option value="">+863&nbsp;&nbsp;  中国澳门</option>
                <option value="">+886&nbsp;&nbsp;  中国台湾</option>
                <option value="">+82&nbsp;&nbsp;&nbsp;&nbsp;  韩国</option>
                <option value="">+81&nbsp;&nbsp;&nbsp;&nbsp;  日本</option>
                <option value="">+1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  美国</option>
                <option value="">+1 &nbsp;&nbsp;&nbsp;&nbsp; 加拿大</option>
                <option value="">+44&nbsp;&nbsp;&nbsp;&nbsp;  澳大利亚</option>
                <option value="">+61 &nbsp;&nbsp;&nbsp;&nbsp; 加拿大</option>
              </select>
            </div>
            <div><input type="text" placeholder="请输入手机号" id="phone" name="phone"></div>
          </div>

          <div>
            <div><label for=""><i class="icon iconfont" title="请输入验证码">&#xeac2;</i></label></div>
           
            <div><input type="text" placeholder="请输入验证码" > <a href="javascript:void(0);" id="pdp">获取验证码</a></div>
          </div>
          <div>
            <button id="deng">按钮</button>
          </div>

          <div><a href="#"><i class="icon iconfont">&#xe666;</i>微博登录</a>
             <a href="#"><i class="icon iconfont">&#xe613;</i>支付宝登录</a></div>
          <div>
            <ul>
              <li><a href="#">免费注册</a></li>
            </ul>
          </div>

        </div>
        </div>

      </div>

        <!-- 第二个div -->
      <div class="two" id="two">
        <div>手机扫码，登陆更安全</div>
        <div>
          <img src="./img_03/deng_lu_er_wei_ma.png" alt="">
        </div>
        <div>
          <div><img src="./img_03/sao_yi_sao.png" alt=""></div>
          <div>
            <p>打开&nbsp;&nbsp;<a href="#">淘宝APP</a>&nbsp;&nbsp; |&nbsp;&nbsp; <a href="#">天猫APP</a></p>
            <p>扫一扫登录</p>
          </div>
          
        </div>
        <div>
          <ul>
            <li><a href="#">密码登录</a></li>
            <li><a href="#">免费注册</a></li>
          </ul>
        </div>

      </div>

        <div>
          扫码登陆更安全
          <span></span>
          <span></span>
        </div>
        <div id="kaiguan" flag="false">
        </div>
      </div>

     </div>

    </div>
</body>
</html>
<script>
  $(function(){

    
    $('#xuan>li').on('click',function(){
      $(this).addClass('bor').siblings().removeClass('bor');
      let index = $('#xuan>li').index($(this));
      $(`#ze>div:eq(${index})`).css('display','block').siblings().css('display','none');
    })
    $('#kaiguan').on('click',function(){
      if($('#kaiguan').attr('flag') === 'false'){
        $('#kaiguan').attr('flag','true').addClass('bg');
        $('#one').css('display','none');
        $('#two').css('display','block');
      }else{
        $('#kaiguan').attr('flag','false').removeClass('bg');
        $('#one').css('display','block');
        $('#two').css('display','none');
      }
    }) 
    
    $('#denglu').on('click',function(){
      $.getJSON('../interface/hasuser.php',{username:$('#username').val(),
      password:$('#password').val()},function(data){
        // console.log(data);
          $('#denglu_hide').css('display',data.display);
          if(data.display === 'none'){
            location.href="./dome01.html";
          }
        })
    })
    $('#username').on('input',function(){
      $('#denglu_hide').css('display','none');
    })
    $('#pdp').on('click',function(){
      let v = $('#phone').val();
  let reg = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/;
      let result = reg.test(v);
      if(result){
        $('#duanxin_hide').css('display','block');
      }
    })

    $('#deng').on('click',function(){
      let v = $('#phone').val();
  let reg = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/;
      let result = reg.test(v);
      // console.log( $('#duanxin_hide'));
     if(result){
        $.getJSON('../interface/hasphone.php',{phone:$('#phone').val()},function(ress){
            if(ress.flag){
      $('#duanxin_hide').css('display','block').text(ress.message);
            }
        })
     }else{
      $('#duanxin_hide').css('display','block');
     }
    })
    $('#phone').on('input',function(){
      $('#duanxin_hide').css('display','none');
    })
    

  })
</script>